<template>
	<!-- 个人信息 -->
	<view class="user">
		<view class="user_img flex-cb" @click="handlehead">
			<text>头像</text>
			<view class="img flex align-center">
				<image src="/static/logo.png" mode="" v-if="user.avater == ''"></image>
				<image :src="user.avatar" mode="" v-else style="border-radius: 50%;"></image>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="user_img flex-cb user_name" @click="handlename">
			<text>昵称</text>
			<view class="img flex align-center">
				<text class="text">{{user.nickname}}</text>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<navigator url="./phone" class="user_img flex-cb user_phone" >
			<text>修改手机号</text>
			<view class="img flex align-center">
				<text class="phone">{{user.phone}}</text>
				<text class="cuIcon-right"></text>
			</view>
		</navigator>
		<navigator :url="'./phone?zxsj=1'+'&phone='+user.phone" class="foot">注销账号</navigator>
		<view class="modal_img  " v-if="isshow">
			<view class="button1 flex-c" @click="handleimg">相册</view>
			<view class="button1 button2 flex-c" @click="handlehead">取消</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow:0,
				user:'',
				
			};
		},
		onLoad() {
		},
		onShow() {
			this.getuserinfo()
		},
		methods:{
			handlehead(){
				this.isshow = !this.isshow
			},
			handleimg(){//点击相册
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.showLoading({
							title: '正在上传',
							mask: true
						});
						this.isshow = 0
						this.$api.upImage(res.tempFilePaths[0]).then(Res => {
							uni.hideLoading();
							if(Res){
								this.$api.avatar({
									avatar:Res
								},true).then(res=>{
									if(res.code == 200001) this.getuserinfo()
								})
							}
						});
					}
				});
			},
			handlename(){
				uni.showModal({
					confirmColor:'#1CD699',
					editable:true,
					title:'修改昵称',
					placeholderText:'请输入修改昵称',
					success:(res)=>{
						if (res.confirm) {
							if(!res.content == ''){
								this.$api.nickname({
									nickname:res.content
								},true).then(e=>{
									if(e.code == 200001){
										this.getuserinfo()
									}
								})
							}
							
						} 
					}
				})
			},
			getuserinfo(){
				this.$api.user({},true).then(res=>{
					if(res.code == 200001){
						this.user = res.data
						if(res.data.avatar !== '' | res.data.avatar !== null){
							this.user.avatar = this.$base + res.data.avatar
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.user{
	background-color: #fff;
	width: 100vh;
	height: 100vh;
	.user_img{
		height: 120rpx;
		width: 710rpx;
		margin-left: 20rpx;
		border-bottom: #EBEBEB solid 1rpx;
		font-size: 26rpx;
		color: #666;
		padding-bottom: 30rpx;
		.img{
			image{
				width: 78rpx;
				height: 78rpx;
				margin-right: 33rpx;
			}
			.cuIcon-right{
				margin-right: 23rpx;
			}
		}
		
	}
	.user_name,.user_phone{
		height: 100rpx;
		padding-bottom: 0;
	}
	.user_name{
		.text{
			font-size: 30rpx;
			font-weight: 500;
			color: #333;
			margin-right: 20rpx;
		}
	}
	.user_phone{
		.phone{
			margin-right: 12rpx;
		}
	}
	.foot{
		width: 120rpx;
		height: 42rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #1CD699;
		margin-left: 42rpx;
		margin-top: 30rpx;
	}
}
.modal_img{
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,.5);
	position: fixed;
	left: 0;
	top: 0;
	.button1{
		width: 710rpx;
		height: 116rpx;
		margin: auto;
		margin-bottom: 26rpx;
		background: #FFFFFF;
		border-radius: 14px 14px 14px 14px;
		filter: blur(undefinedpx);
		color: #1CD699;
		position: absolute;
		bottom: 158rpx;
		left: 21rpx;
	}
	.button2{
		color: #000;
		bottom: 26rpx;
	}
}
</style>
